<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="one">111</div>
    <div class="two">222</div>
    <p id="three">333</p>
    <script>
        // Dom  document Object Model 文档对象模型
        // Dom  都是有关页面操作的方法(控制页面标签的 增删改查)

        // 如何获取 Dom 节点( 页面上的标签 在js中叫做 Dom节点)
        // document.getElementById("id名")  返回的是 通过id 选中的Dom 节点
        // let a = document.getElementById("three");   //获取节点
        // console.log(a);
        // a.style.color = "red";
        // 将 红色 赋值给 变量a 上的行内样式 color

        // document.getElementsByTagName("标签名")  返回的是 通过标签名 查找到的节点  注意这里返回的是 数组
        // let b = document.getElementsByTagName("div");
        // console.log(b);   //返回值是一个伪数组   有下标 有长度 能遍历  但是没有数组内置方法可用
        // for (let i = 0; i < b.length; i++) {
        //     b[i].style.color = "red"
        // }

        // document.getElementsByClassName("类名")   返回的是 通过类名查找到的节点  注意  这里是返回的 数组

        // document.querySelector()  //符合条件的第一个节点
        // document.querySelectorAll()  //返回的也是数组
        let p = document.querySelector("p")
        let two = document.querySelector(".two")
        let three = document.querySelector("#three")





        // 1,获取 类名叫做 two的节点
        // 2,给该节点设置字体颜色
    </script>
</body>

</html>